@import '@wordpress/base-styles/variables';
@import "@automattic/typography/styles/variables";
@import "variables";

/**
 * Help Center Header
 */
.help-center .help-center__container {
	.components-card__header {
		padding: 9px 16px;

		&.is-minimized {
			padding: 16px;
		}
		.components-spinner {
			margin: 0 8px;
		}
	}

	&.is-minimized {
		.help-center__container-header {
			.help-center-header__text {
				flex: unset;
				cursor: pointer;
			}
		}
	}

	.help-center__container-header {
		border-bottom: 1px solid $gray-100;
		border-radius: 16px;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;

		&.has-unread {
			background: $help-center-blue;
			color: var(--studio-white);
			fill: var(--studio-white);
			border: none;

			button {
				color: var(--studio-white);
			}
		}

		.help-center-header__maximize,
		.help-center-header__minimize,
		.help-center-header__close {
			&:focus {
				outline: $help-center-blue solid 2px;
			}
		}

		.help-center-header__text {
			display: flex;
			align-items: center;
			gap: 4px;
			font-size: $root-font-size;
			font-weight: 500;
			flex: 1;
			cursor: move;

			:focus {
				outline: none;
			}

			.help-center-header__article-title {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				max-width: 200px;
			}

			.help-center-header__unread-count {
				display: inline-block;
				margin-left: 8px;
				box-sizing: border-box;
				padding: 4px;
				width: 24px;
				height: 24px;
				background: var(--studio-white);
				border-radius: 50%;
				font-size: $font-body-extra-small;
				color: $help-center-blue;
			}
		}
	}
}

.conversation-menu__wrapper {
	padding: 4px 0;
	text-align: center;

	svg {
		fill: var(--studio-gray-70);
		padding: 0 4px;
	}

	button:disabled {
		svg {
			fill: var(--wp-components-color-gray-600, #949494);
		}

		color: var(--wp-components-color-gray-600, #949494);
	}

	button {
		display: flex;
		align-items: center;
		width: 100%;
		cursor: pointer;
		gap: 8px;
		color: var(--studio-gray-70);
		border: none;
		background: unset;
		padding: 8px 8px 8px 14px;

		div {
			margin-bottom: 2px;
			font-size: 0.875rem;
		}

		&:not( :disabled) {

			&:hover,
			&:focus {
				background-color: $help-center-blue;
				color: var(--studio-white);

				svg {
					fill: var(--studio-white);
				}
			}

			&:not(:hover) {
				background-color: unset;
				color: var(--studio-gray-70);

				svg {
					fill: var(--studio-gray-70);
				}
			}
		}
	}

	.conversation-menu__notification-toggle {

		.components-form-toggle.is-checked {
			.components-form-toggle__track {
				background-color: $help-center-blue;
				border-color: $help-center-blue;
			}
		}

		&:hover label {
			cursor: initial;
		}
	}
}